<template>
  <div id="classifyList">
    <div class="practicalClassroomContentClassify">
      <div class="newsListSearch">
        <label for="newsListSearchId" style="vertical-align: middle; margin-right: .2rem;">
          <img src="../../assets/img/home/news_search.png" alt="">
          <input id="newsListSearchId" type="text" placeholder="搜索" v-model="contentText" @keydown.enter="fetchSkillLiterByType()">
        </label>
        <div class="btnBox">
            <button class="btnDef" @click="fetchSkillLiterByType()">搜索</button>
        </div>
      </div>
      <div class="practicalClassroomContentClassifyTabTop">
        <ul>
          <li class="blueBack">
            <p>全部分类</p>
          </li>
          <li
            :class="{ blueWords: index === categoryTabIndex }"
            v-for="(item, index) in categoryData"
            :key="index"
            @click="onTabClassify(item, index)"
          >
            <p>{{ item.label }}</p>
          </li>
        </ul>
      </div>
      <div style="width: 100%; height: 1px; background-color: #eee"></div>
      <div class="practicalClassroomContentClassifyTabBottom">
        <ul>
          <!-- <li class="blueBack">
            <p>课程主题</p>
          </li> -->
          <!-- <li
            :class="{ blueWords: themeTabIndex === -1 }"
            @click="onTabTheme({ parent: 0 }, -1)"
          >
            <p>全部</p>
          </li> -->
          <li
            :class="{ blueWords: themeTabIndex === index }"
            v-for="(item, index) in themeData"
            :key="'theme1' + index"
            @click="onTabTheme(item, index)"
            v-show="themeParent === 0"
          >
            <p>{{ item.label }}</p>
          </li>
          <li
            :class="{ blueWords: themeTabIndex === index }"
            v-for="(item, index) in themeData"
            :key="'theme2' + index"
            @click="onTabTheme(item, index)"
            v-show="item.parent === themeParent"
          >
            <p>{{ item.label }}</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="skillLiftPublicBookFlexRight">
      <ul>
        <li
          v-for="(item, index) in worksList"
          :key="index"
          @click="jumpTo('/worksDetail?worksId=' + item.id)"
        >
          <img
            class="publicBookFruitImg"
            :src="$globalImageUrl + item.imageUrl"
            alt=""
          />
          <p class="ellipse">{{ item.worksTitle }}</p>
          <div class="publicBookRemark">
            <img src="../../assets/img/common/browse.png" alt="" />
            <span>{{ item.browseNum }}</span>
            <img src="../../assets/img/common/comment.png" alt="" />
            <span>{{ item.commentNum }}</span>
            <img src="../../assets/img/common/praise.png" alt="" />
            <span>{{ item.praiseNum }}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="pageNumber" v-if="pageTotals != 0">
      <div @click="prevPage()">上一页</div>
      <div @click="nowPage(item)" :class="{pageActive: pageActiveIndex === item}" v-for="(item, index) in pageTotals" :key="index">{{item}}</div>
      <div @click="nextPage()">下一页</div>
    </div>
  </div>
</template>

<script>
import pageNumber from '../../components/pageNumber/index.vue'
export default {
  name: "classifyList",
  data() {
    return {
        pageTotals: 1,
        pageActiveIndex: 1,
        categoryTabIndex: 0,
        themeTabIndex: 0,
        themeParent: 0,
        themeChild: 0,
        categoryData: [],
        themeData: [],
        worksList: [],
        contentText: '',
        id: this.$route.query.id,
        categoryId: this.$route.query.index
    };
  },
  created() {
    // this.fetchSkillOneClassify()
    // this.fetchSkillTwoClassify()
    this.fetchSkillSelectLiterature()
    // this.fetchSkillLiterByType()
  },
  methods: {
    // 上一页
    prevPage () {
      if (this.pageActiveIndex > 1) {
        this.pageActiveIndex--
        this.fetchSkillLiterByType()
      }
    },
    // 下一页
    nextPage () {
      if (this.pageTotals > this.pageActiveIndex) {
        this.pageActiveIndex++
        this.fetchSkillLiterByType()
      }
    },
    // 选择页码
    nowPage (index) {
      this.pageActiveIndex = index
      this.fetchSkillLiterByType()
    },
    // 课程类别tab切换
    onTabClassify (item, index) {
      if (this.categoryTabIndex === index) {
        return
      }
      this.categoryTabIndex = index
      this.themeTabIndex = -1
      this.themeParent = item.value
    //   this.fetchSkillNewCourse('', '')
    },
    // 课程主题tab切换
    onTabTheme (item, index) {
      if (this.themeTabIndex === index) {
        return
      }
      this.themeTabIndex = index
      this.themeChild = item.parent
      this.id = item.id
      // console.log(this.id)
      this.categoryId = this.categoryData[this.categoryTabIndex].id
      console.log(this.categoryId)

      this.fetchSkillLiterByType(item.id, index)
    },
    // 获取一级分类
    // fetchSkillOneClassify () {
    //   this.$api.getSkillOneClassify({
    //   }).then(res => {
    //     if (res.code === 0) {
    //       this.categoryData = [{
    //         label: '全部',
    //         value: 0
    //       }]
    //       for (let i = 0; i < res.data.length; i++) {
    //         this.categoryData.push({
    //           label: res.data[i].classifyName,
    //           value: res.data[i].classifyId
    //         })
    //       }
    //     }
    //   })
    // },
    // // 获取二级分类
    // fetchSkillTwoClassify () {
    //   this.$api.getSkillTwoClassify({
    //   }).then(res => {
    //     if (res.code === 0) {
    //       this.themeData = []
    //       for (let i = 0; i < res.data.length; i++) {
    //         this.themeData.push({
    //           parent: res.data[i].parentId,
    //           label: res.data[i].classifyName
    //         })
    //       }
    //     }
    //   })
    // },
    // 获取实战案例列表
    fetchSkillSelectLiterature () {
      this.$api.getSkillSelectLiterature({
      }).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.categoryData = []
          for (let i = 0; i < res.data.length; i++) {
            this.categoryData.push({
              id: res.data[i].classifyId,
              label: res.data[i].classifyName,
              value: res.data[i].classifyId,
            })
            for (let l = 0; l < res.data[i].classifyList.length; l++) {
                this.themeData.push({
                    id: res.data[i].classifyList[l].classifyId,
                    parent: res.data[i].classifyId,
                    label: res.data[i].classifyList[l].classifyName
                })
            }
            // for (let j = 0; j < res.data[i].literatureList.length; j++) {
            //   this.worksList.push({
            //     imageUrl: res.data[i].literatureList[j].literatureImg,
            //     worksTitle: res.data[i].literatureList[j].literatureName,
            //     browseNum: res.data[i].literatureList[j].watchNum,
            //     commentNum: res.data[i].literatureList[j].commentNum,
            //     praiseNum: res.data[i].literatureList[j].likeNum,
            //     id: res.data[i].literatureList[j].id
            //   })
            // }
            
          }
          this.fetchSkillLiterByType()
        }
        console.log(this.worksList)
      })
    },
    // 获取实战案例每项列表
    fetchSkillLiterByType (id, index) {
        // console.log(id)
    //     console.log(this.childId)
    //   if (this.childId === childId) {
    //     return
    //   }
    //   this.childId = id
      this.$api.getSkillLiterByType({
        categoryId: this.categoryId,
        // reclassifyId: id,
        pageNum: this.pageActiveIndex,
        reclassifyId: this.id,
        literatureName: this.contentText
      }).then(res => {
        console.log(res)
        if (res.code === 0) {
          console.log(res.total)
          this.pageTotals = Math.ceil(res.total / 10)
          this.worksList = []
          for (let i = 0; i < res.data.length; i++) {
            this.worksList.push({
              imageUrl: res.data[i].literatureImg,
              worksTitle: res.data[i].literatureName,
              browseNum: res.data[i].watchNum,
              commentNum: res.data[i].commentNum,
              praiseNum: res.data[i].likeNum,
              id: res.data[i].id
            })
          }
        }
      })
    }
  },
};
</script>

<style lang="less" scoped>
#classifyList {
    width: 1200px;
    margin: auto;
    padding: .5rem 0;
    .pageNumber{
        width: 100%;
        height: 50px;
        padding: .2rem;
        text-align: center;
        .pageActive{
          color: #fff;
          background-color: #15A29C;
        }
        div{
          display: inline-block;
          font-size: .16rem;
          font-weight: 500;
          color: #333;
          line-height: .24rem;
          background-color: #fff;
          padding: .03rem .1rem;
          margin: 0 .05rem;
        }
      }
  .practicalClassroomContentClassify {
    .newsListSearch{
    background-color: #fff;
    padding: .2rem;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    /deep/ .userSelect{
      font-size: 0;
    }
    label{
      display: inline-block;
      width: 2rem;
      height: .4rem;
      border: 1px solid #ddd;
      border-radius: .05rem;
      position: relative;
      img{
        width: .2rem;
        height: .2rem;
        display: inline-block;
        position: absolute;
        left: .1rem;
        top: 50%;
        transform: translateY(-50%);
      }
      input{
        display: inline-block;
        width: 100%;
        height: 100%;
        padding-left: .4rem;
        border-radius: .05rem;
        font-size: .14rem;
        font-weight: 500;
        color: #333;
        line-height: .22rem;
      }
    }
    .btnBox{
      width: 80px;
      vertical-align: top;
    }
  }
    background-color: #fff;
    padding: 0.1rem 0.2rem;
    margin-bottom: 0.2rem;
    ul {
      padding: 0.1rem 0 0 0;
      font-size: 0;
      li {
        display: inline-block;
        padding: 0.02rem 0.07rem;
        border-radius: 0.05rem;
        margin-right: 0.1rem;
        margin-bottom: 0.1rem;
        p {
          font-weight: 500;
          font-size: 0.18rem;
          line-height: 0.26rem;
          color: inherit;
        }
      }
      li.blueBack {
        background-color: #4aa09b;
        color: #fff;
      }
      li.blueWords {
        background-color: #f6f6f6;
        color: #4aa09b;
      }
    }
    .practicalClassroomContentClassifyTabTop {
    }
    .practicalClassroomContentClassifyTabBottom {
    }
  }
  .skillLiftPublicBookFlexRight {
    background-color: #fff;
    width: calc(100% - 2.3rem);
    height: 4rem;
    padding-left: 0.2rem;
    ul {
      display: flex;
      justify-content: left;
      flex-wrap: wrap;
      li:nth-child(4n) {
        margin-right: 0;
      }
      li {
        display: inline-block;
        margin-bottom: 0.1rem;
        background-color: #fff;
        width: 2.3rem;
        margin-right: 0.1rem;
        img.publicBookFruitImg {
          width: 100%;
          height: 1.5rem;
          display: inline-block;
        }
        p {
          font-size: 0.14rem;
          font-weight: 500;
          color: #333;
          line-height: 0.26rem;
          height: 0.2rem;
          padding: 0 0.05rem;
        }
        div.publicBookRemark {
          padding: 0 0.05rem;
          img {
            width: 0.12rem;
            height: 0.12rem;
            display: inline-block;
          }
          span {
            font-size: 0.13rem;
            font-weight: 500;
            color: #aaa;
            line-height: 0.16rem;
          }
        }
      }
      li:nth-child(n + 5) {
        margin-bottom: 0;
      }
    }
  }
}
</style>
